<template>
    <view class="main">
        <view class="" v-if="cous.name !=''">
            <view class="posr">
                <u-image :src="cous.image" width="100%" height="288rpx" border-radius="20">
                    <u-loading slot="loading"></u-loading>
                </u-image>
                <view class="content box box-pack-between box-align-center padd20">
                    <view class="" style="padding: 0 30rpx;">
                        <view class="title">
                            {{cous.name}}
                        </view>
                        <view class="zb">
                            主编：{{cous.material}}
                        </view>
                    </view>
                </view>
                <view class="cont-detail" @click="show =!show">
                    详情
                </view>
            </view>
            <view class="course-cont">
                <view class="cont-top box box-tb box-pack-start">
                    <view class="tabbar active">
                        课程学习
                    </view>
                    <view class="cnt">
                        共{{stageList.length}}章
                    </view>
                </view>
                <u-collapse :item-style="itemStyle">
                    <u-collapse-item :title="`第${stage.num}章   ${stage.title}`" v-for="(stage, indexs) in stageList"
                        :key="indexs">
                        <view class="">
                            <view v-for="(item, index) in stage.sections" :key="index" @click="goDetail(item,index,indexs)">
                                <view v-if="index == 0">
                                    <view class="box box-align-center box-pack-between slot-title">
                                        <view class="box box-align-center box-pack-start">
                                            <view class="ml5 number" v-if="item.num<=9">
                                                {{`0${item.num}`}}
                                            </view>
                                            <view class="ml5 number" v-else>
                                                {{`${item.num}`}}
                                            </view>
                                            <view class="box box-tb box-align-start box-pack-center ml10">
                                                <view class="times" style="font-size: 28rpx;">
                                                    {{item.title}}
                                                </view>
                                                <view class="box box-align-center box-pack-start" v-if="item.time !=null">
                                                    <u-image src="@/static/home/icon_mp4.png" width="31rpx" height="31rpx">
                                                        <u-loading slot="loading"></u-loading>
                                                    </u-image>
                                                    <view style="font-size: 26rpx;color: #888F9E;" class="ml5 mt5">
                                                        {{item.time}}
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                        <view class="box box-align-center box-pack-end" style="font-size: 24rpx;">
                                            已完成
                                            <view class="percent ml10">{{item.rate}}%</view>
                                        </view>
                                    </view>

                                </view>
                                <view class="" v-else>
                                    <view class="box box-align-center box-pack-between slot-title">
                                        <view class="box box-align-center box-pack-start">
                                            <view class="ml5 number" v-if="item.num<=9">
                                                {{`0${item.num}`}}
                                            </view>
                                            <view class="ml5 number" v-else>
                                                {{`${item.num}`}}
                                            </view>
                                            <view class="box box-tb box-align-start box-pack-center ml10">
                                                <view class="times" style="font-size: 28rpx;">
                                                    {{item.title}}
                                                </view>
                                                <view class="box box-align-center box-pack-start" v-if="item.time !=null">
                                                    <u-image src="@/static/home/icon_mp4.png" width="31rpx" height="31rpx">
                                                        <u-loading slot="loading"></u-loading>
                                                    </u-image>
                                                    <view style="font-size: 26rpx;color: #888F9E;" class="ml5 mt5">
                                                        {{item.time}}
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
										<view class="box box-align-center box-pack-end" style="font-size: 24rpx;">
										    已完成
										    <view class="percent ml10">{{item.rate}}%</view>
										</view>
                                        <!-- <view class="box box-align-center box-pack-end" style="font-size: 24rpx;" v-if="stage.sections[index-1].unlocked ==true">
                                            已完成
                                            <view class="percent ml10">{{item.rate}}%</view>
                                        </view>
                                        <view class="box box-align-center box-pack-end" style="font-size: 24rpx;"
                                            v-else>
                                            <u-image src="@/static/class/icon_key.png" width="21rpx" height="25rpx"></u-image>
                                        </view> -->
                                    </view>
                                </view>

                            </view>
                        </view>

                    </u-collapse-item>
                </u-collapse>
            </view>
            <u-popup v-model="show" mode="bottom" border-radius="20" length="75%">
                <view class="content">
                    <view class="tips active">
                        课程详情
                    </view>
                    <view style="padding: 33rpx 52rpx;">
                        <u-parse :html="cous.info" :selectable="true" :use-cache="true"></u-parse>
                    </view>
                </view>
            </u-popup>
            <u-toast ref="uToast" />
        </view>
        <no-data title="暂无课程任务" v-else></no-data>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                user: uni.getStorageSync("user"),
                dclass: uni.getStorageSync("dclass"),
                stageList: [],
                cous: {
                    image: '',
                    name: '',
                    material: ''
                },

                isPub: true, //是否发布课程
                show: false,
            }
        },
        onShow() {
            this.stuKcrwList();
        },
        onLoad() {
            // this.stuKcrwList();
        },
        methods: {
            stuKcrwList() {
                uni.showLoading({title: '加载中', icon: 'none'})
                let params = {
                    schoolid: this.user.schoolId,
                    classid: this.dclass.id,
                    userid: this.user.id
                };
                this.$api.post({url: '/yclasscoustaskrecords/stuKcrwList'}, params).then(res => {
                    uni.hideLoading()
                    this.cous = res.data;
                    this.stageList = res.list;
                    //console.log(res.list);
                })
            },
            goDetail(item, index, i) {
                //console.log(item, index, i);
				uni.navigateTo({
				    url: '/stupageHome/chaperDetail?id=' + item.id + '&planid=' + this.cous.couslistid +
				        '&cousid=' + this.cous.id + '&rate=' + item.rate + '&time=' + item.time
				})
				return
                if (index == 0) {
                    uni.navigateTo({
                        url: '/stupageHome/chaperDetail?id=' + item.id + '&planid=' + this.cous.couslistid +
                            '&cousid=' + this.cous.id + '&rate=' + item.rate + '&time=' + item.time
                    })
                } else {
                    if (this.stageList[i].sections[index - 1].unlocked) { //判断上一个视频的进度是否超过95，如果超过直接播放下一个
                        uni.navigateTo({
                            url: '/stupageHome/chaperDetail?id=' + item.id + '&planid=' + this.cous.couslistid +
                                '&cousid=' + this.cous.id + '&rate=' + item.rate + '&time=' + item.time
                        })
                    } else {
                        this.$refs.uToast.show({
                            title: '请先观看完上一个视频',
                            type: 'info'
                        })
                    }
                }

            }

        }
    }
</script>

<style scoped lang="scss">
    .main {
        height: 100%;
        position: relative;
        overflow-y: auto;
    }

    .a-title {
        padding-left: 40rpx;
        width: 540rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .chapter {
        padding: 20rpx;
    }

    .list {
        width: 450prx;
    }

    .context {
        width: 400rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .posr {
        position: relative;

        .cont-detail {
            position: absolute;
            top: 30rpx;
            right: 20rpx;
            width: 120rpx;
            height: 48rpx;
            line-height: 48rpx;
            text-align: center;
            background: #F99115;
            box-shadow: 0px 2px 10rpx 0px rgba(182, 129, 39, 0.3);
            ;
            border-radius: 24rpx;
            color: #fff;
            font-size: 24rpx;
        }

        .content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 116rpx;
            background-color: rgba(46, 50, 61, .3);

            .title {
                font-size: 32rpx;
                font-weight: 600;
                color: #fff;
            }

            .zb {
                color: #fff;
                font-size: 26rpx;
            }

            .sort {
                width: 132rpx;
                height: 48rpx;
                line-height: 48rpx;
                background: #FEAA19;
                border-radius: 24rpx;
                color: #fff;
            }
        }
    }

    .cont-top {
        background-color: #fff;
        display: flex;
        width: 100%;
        // border-bottom: 2rpx solid #F0F1F8;


        .tabbar {
            padding-left: 40rpx;
            flex: 1;
            height: 80rpx;
            line-height: 80rpx;
            text-align: left;

            &.active:after {
                content: '';
                width: auto;
                width: 102rpx;
                height: 17rpx;
                background: #7C79F5;
                border-radius: 6rpx;
                display: block;
                margin-top: -32rpx;
                z-index: 111111;
            }
        }

        .cnt {
            margin-top: 20rpx;
            padding-left: 40rpx;
            height: 50rpx;
            line-height: 50rpx;
            background-color: #F4F6FA;
            color: #5F6572;
        }
    }

    .course-cont {
        box-sizing: border-box;
        background: #FFFFFF;
        box-shadow: 0px 23px 46px 0px rgba(205, 207, 230, 0.18);
    }

    .slot-title {
        padding: 20rpx;
        height: 100rpx;
        margin-top: 30rpx;
    }

    .index {
        font-size: 36rpx;
        color: #AEB8C;
    }

    .percent {
        color: #626BF1;
    }

    .percents {
        color: #626BF1;
    }

    .number {
        font-size: 36rpx;
        font-weight: blod;
        color: #AEB8CF;
    }

    .content {
        padding: 40rpx 0;
    }

    .tips {
        font-size: 36rpx;
        width: 100%;
        padding-left: 40rpx;
        height: 84rpx;
        line-height: 84rpx;
        text-align: left;

        &:after {
            content: '';
            width: auto;
            width: 144rpx;
            height: 17rpx;
            background: #7C79F5;
            border-radius: 6rpx;
            display: block;
            margin-top: -32rpx;
            z-index: 111111;
        }
    }

    .status {
        padding: 20rpx 37rpx;
        width: 636rpx;
        height: 100rpx;
        overflow: hidden;

        .ite {
            width: 100rpx;
        }

        .class-list {
            width: 430rpx;
            flex-wrap: wrap;

            .items {
                margin: 0 10rpx 10rpx 0;
                padding: 0 5rpx;
                width: auto;
                height: 32rpx;
                line-height: 32rpx;
                background: #FFFFFF;
                border: 1rpx solid #FDE6CB;
                border-radius: 4rpx;
                color: #F99115;
                font-size: 20rpx;
            }
        }

    }

    .times {
        font-size: 26rpx;
        color: #888F9E;
        width: 360rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
</style>
